<template>
  <div class="comment-card">
    <!-- 主评论 -->
    <div class="comment-header">
      <span class="comment-author">{{ comment.username ?? '匿名用户' }}</span>
      <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
    </div>
    <div class="comment-content">{{ comment.content ?? '' }}</div>

    <div class="reply-actions">
      <el-button text size="small" @click="toggleReply">
        {{ showReply ? '取消' : '回复' }}
      </el-button>
      <el-button text size="small" v-if="replies.length > 0" @click="toggleExpand">
        {{ expanded ? '收起回复' : '展开回复' }}
      </el-button>
    </div>

    <!-- 回复输入框 -->
    <div v-if="showReply" class="reply-input">
      <el-input v-model="replyContent" placeholder="回复内容" type="textarea" :rows="2" />
      <el-button type="primary" size="small" @click="submitReply">提交回复</el-button>
    </div>

    <!-- 子评论 -->
    <div v-if="expanded" class="replies">
      <div class="child-comment" v-for="reply in childReplies" :key="reply.id ?? -1">
        <div class="child-header">
          <span class="child-author">{{ reply.username ?? '匿名用户' }}</span>
          <span class="child-text">回复</span>
          <span class="child-target">{{ getReplyTarget(reply.parentId) }}</span>
          <span class="child-time">{{ formatTime(reply.createTime) }}</span>
        </div>
        <div class="child-content">{{ reply.content ?? '' }}</div>
        <div class="child-reply-btn">
          <el-button text size="small" @click="prepareReply(reply)">回复</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCommentItem } from '@/hooks/comment/useCommentItem'
import type { PropType } from 'vue'
import type { Comment } from '@/interface/commonData'

const props = defineProps({
  comment: {
    type: Object as PropType<Comment>,
    required: true,
  },
  replies: {
    type: Array as PropType<Comment[]>,
    default: () => [],
  },
  allComments: {
    type: Array as PropType<Comment[]>,
    default: () => [],
  },
})

const emit = defineEmits<{
  (e: 'reply', content: string, parent: Comment): void
}>()

const {
  showReply,
  expanded,
  replyContent,
  toggleReply,
  toggleExpand,
  submitReply,
  prepareReply,
  childReplies,
  getReplyTarget,
  formatTime
} = useCommentItem(props, emit)
</script>

<style scoped>
.comment-card {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  background-color: #fff;
}

.comment-header {
  font-weight: bold;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.comment-author {
  font-weight: 600;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-content {
  margin-bottom: 8px;
}

.reply-actions {
  margin-top: 8px;
}

.reply-input {
  margin-top: 8px;
}

.replies {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px solid #f0f0f0;
}

.child-comment {
  margin-bottom: 8px;
}

.child-header {
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.child-author {
  font-weight: 600;
  color: #555;
}

.child-text {
  margin: 0 4px;
  font-size: 12px;
  color: #888;
  user-select: none;
}

.child-target {
  color: #777;
  font-weight: 600;
  margin-right: 8px;
}

.child-time {
  margin-left: auto;
  font-size: 12px;
  color: #aaa;
}

.child-content {
  padding-left: 8px;
  margin-bottom: 4px;
}

.child-reply-btn {
  margin-left: 8px;
}
</style>
